﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Site.master" AutoEventWireup="true" CodeFile="Frm_Componentes.aspx.cs" Inherits="Views_Editor_Frm_Componentes" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script src="<%=ResolveClientUrl("~/Scripts/data/TiposElementos.js" ) %>" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<input id="hd_idComponente" runat="server" type="hidden"/>
    
    <br />
    <!-- Table -->
     <div id="gridComponentes"></div>
     <br />


    <!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Nuevo Componente</h3>
  </div>
  <div id="contenido" class="modal-body">
    <!-- Table -->
            <fieldset>
                <div class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label" for="txtaDescripcion">Descripción </label>
                        <div class="controls">
                            <textarea id="txtaDescripcion" rows="2" class="span5" placeholder="Ingrese un nombre del item ..." name="Descripción"  validationMessage="Descripción es requerido!" required></textarea>
                        </div>
                    </div>	
                    <div class="control-group">
                        <label class="control-label" for="cboClases">Clase </label>
                        <div class="controls">
                            <select id="cboClases" name="Clase"  validationMessage="Clase es requerido!" required></select>
                        </div>
                    </div>	
                    
                </div>
            </fieldset> 
        
            <fieldset>
                <div class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label" for="cboUnidades">Unidad</label>
                        <div class="controls">
                            <select id="cboUnidades"  name="Unidad"  validationMessage="Unidad es requerido!" required></select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="txtTiempoVida">Tiempo de Vida</label>
                        <div class="controls">
                            <input id="txtTiempoVida" placeholder="Tiempo de vida" type="number" value="" min="1" max="100000" step="1" name="Tiempo de vida" validationMessage="Tiempo de vida es requerido!" required/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label" for="cboTipo">Tipo</label>
                        <div class="controls">
                            <input id="cboTipo" name="Tipo"  validationMessage="Tipo es requerido!" required/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="cboSubTipo">Sub Tipo</label>
                        <div class="controls">
                            <input id="cboSubTipo" name="SubTipo"  validationMessage="SubTipo es requerido!" required/>
                        </div>
                    </div>
                </div>
            </fieldset> 
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
    <button id="btnAgregarComponente" class="btn btn-primary">Grabar</button>
  </div>
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" Runat="Server">
<script type="text/javascript">

    $(document).ready(function () {
        $("#txtTiempoVida").kendoNumericTextBox({
            format: "#"
        });
        loadComponentes();
        CargarLista("cboUnidades", "ListaUnidades", "Seleccione Unidad...");
        CargarLista("cboClases", "ListaClases", "Seleccione Clase...");
        //CargarLista("cboTipo", "ListaTipos", "Seleccione Tipo...");
        $("#cboTipo").kendoComboBox({
            placeholder: "Seleccione Tipo...",
            dataTextField: "Nombre",
            dataValueField: "IdParametro",
            filter: "contains",
            minLength: 3,
            change: function (e) {
                debugger;
                var value = this.value();
                if (value == "14") {
                    $("#cboSubTipo").data("kendoComboBox").value("");
                    $("#cboSubTipo").removeAttr("required");
                } else {
                    $("#cboSubTipo").empty();
                    var subtipo = $("#cboSubTipo").kendoComboBox({
                        placeholder: "Seleccione SubTipo...",
                        dataTextField: "P06SubTipoDesc",
                        dataValueField: "P06SubTipo",
                        filter: "contains",
                        minLength: 3,
                        valuePrimitive: true,
                        dataSource: {
                            type: "json",
                            transport: {
                                read: {
                                    type: "POST",
                                    url: "Frm_Componentes.aspx/ListaSubTipos",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json"
                                },
                                parameterMap: function (parametros) {
                                    return kendo.stringify({ idTipo: value });
                                }
                            },
                            schema: { data: "d",
                                total: "d.length"
                            }
                        }
                    }).data("kendoComboBox");
                    $("#cboSubTipo").attr("required", "required");
                }

            },
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        type: "POST",
                        url: "Frm_Componentes.aspx/ListaTipos",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    }
                },
                schema: { data: "d",
                    total: "d.length"
                }
            }
        });
        //CargarLista("cboSubTipo", "ListaSubTipos", "Seleccione SubTipos...");
        //insert
        $("#btnAgregarComponente").on("click", function () {
            debugger;
            var validator = $("#contenido").kendoValidator().data("kendoValidator");
            if (validator.validate() != true) {
                return false;
            }
            var objComponente = new Componente();
            var unidad = $("#cboUnidades").data("kendoComboBox");
            var clase = $("#cboClases").data("kendoComboBox");
            var tipo = $("#cboTipo").data("kendoComboBox");
            var subTipo = $("#cboSubTipo").data("kendoComboBox");
            var timepoVida = $("#txtTiempoVida").data("kendoNumericTextBox");
            var subTipoValue = 0;
            if (subTipo.value() != "") {
                subTipoValue = subTipo.value();
            }
            objComponente.Nombre = $("#txtaDescripcion").val();
            objComponente.Descripcion = $("#txtaDescripcion").val();
            objComponente.P01Unidad = unidad.value();
            objComponente.P07Clase = clase.value();
            objComponente.TiempoVidaAnio = timepoVida.value();
            $.ajax({
                type: "POST",
                url: "Frm_Componentes.aspx/GuardarComponente",
                data: kendo.stringify({ comp: objComponente, tipo: tipo.value(), subTipo: subTipoValue }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data.d == "null")
                        return;
                    if (data.d) {
                        var datos = data.d;
                        alert("Se guardó correctamente.");
                        $("#gridComponentes").data("kendoGrid").dataSource.read();
                        $('#myModal').modal('hide');
                        unidad.value("");
                        clase.value("");
                        tipo.value("");
                        subTipo.value("");
                        $("#txtaDescripcion").val("");
                        timepoVida.value("");
                    }
                },
                error: function (data) {
                    alert("No se guardó correctamente.");
                }
            });
            return false;
        });
    });

    function loadComponentes() {
        $("#gridComponentes").empty();
        var gridM = $("#gridComponentes").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        type: "POST",
                        url: "Frm_Componentes.aspx/ObtenerItems",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    }
                },
                //batch: true,
                sort: { field: "IdComponente", dir: "desc" },
                schema: {
                    data: "d",
                    total: "d.length",
                    model: {
                        id: "IdComponente",
                        fields: {
                            Descripcion: { type: "string", editable: false },
                            P01UnidadDesc: { type: "string", editable: false },
                            P07ClaseDesc: { type: "string", editable: false },
                            PrecioUnitarioMinimo: { type: "number", editable: false },
                            PrecioUnitarioMaximo: { type: "number", editable: false },
                            TiempoVidaAnio: { type: "number", editable: false },
                            FecCre: { type: "date" }
                        }
                    }
                },
                pageSize: 25
            },
            toolbar: [
               { template: '<a class="k-button" href="\\#" onclick="return Nuevo_click()">Nuevo</a>' }  ],
            scrollable: true,
            sortable: false,
            filterable: {
                mode: "row",
                operators: {
                    string: {
                        contains: "Contiene",
                        endswith: "Termina",
                        startwith: "Empieza",
                        eq: "Igual A"
                    }
                }
            },
            //dataBound: onDataBound,
            selectable: "row",
            editable:false,
            pageable: {
                input: true,
                numeric: false
            },
            detailInit: detalleFila,
            columns: [
            //{ field: "IdComponente", title: "Codigo" },
                    {field: "Descripcion", title: "Descripción", width: "300px", filterable: {
                        cell: {
                            operator: "contains"
                        }
                    }
                },
                    { field: "P01UnidadDesc", title: "Unidad", width: "60px", filterable: false },
                    { field: "P07ClaseDesc", title: "Clase", width: "60px", filterable: false },
                    { field: "PrecioUnitarioMinimo", title: "Precio Unitario Mínimo", width: "80px", format: "{0:c}", filterable: false },
                    { field: "PrecioUnitarioMaximo", title: "Precio Unitario Máximo", width: "80px", format: "{0:c}", filterable: false },
                    { field: "TiempoVidaAnio", title: "Tiempo Vida Anual", width: "50px", filterable: false },
                    { field: "FecCre", title: "Fecha Creación", format: "{0:dd/MM/yyyy}", width: "90px", filterable: false }
            //,{ command: ["edit"], title: "&nbsp;", width: "50px" }
                ],
            save: function () {
                this.refresh();
            }
            //,change: grid_change
        });
    }
    function Nuevo_click() {
        $('#myModal').modal('show');
    }
    function grid_change(e) {

        //var selectedCells = this.select();
        var row = this.dataItem(this.select());
        //debugger;
        var unidad = $("#cboUnidades").data("kendoComboBox");
        var clase = $("#cboClases").data("kendoComboBox");
        $("#hd_idComponente").val(row.id);
        $("#txtaDescripcion").val(row.Descripcion);
        unidad.value(row.P01Unidad);
        clase.value(row.P07Clase);
    }
    function detalleFila(e) {
        //debugger;
        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        type: "POST",
                        url: "Frm_Componentes.aspx/ObtenerPrecioComponente",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    },
                    create: {
                        type: "POST",
                        url: function (options) {
                            debugger;
                            return "Frm_Componentes.aspx/GuardarPrecioComponente";
                        },
                        contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    },
                    parameterMap: function (options, operation) {
                        debugger;
                        if (operation !== "read" && options.models) {
                            debugger;
                            var fuentes = [];
                            if (options.models != null) {
                                for (var i = 0; i < options.models.length; i++) {
                                    var fuente = {
                                        IdCompPrecio: options.models[i].IdCompPrecio,
                                        P02Fuente: options.models[i].NombreFuente1.IdParametro,
                                        NombreFuente: options.models[i].NombreFuente1.Nombre,
                                        PrecioUnitario: options.models[i].PrecioUnitario
                                    };
                                    fuentes.push(fuente);
                                }
                            }
                            return kendo.stringify({ precios: fuentes, idComponente: e.data.IdComponente });
                        }
                        if (operation === "read") {
                            return kendo.stringify({ idComponente: e.data.IdComponente });
                        }
                    }
                },
                batch: true,
                schema: {
                    parse: function (response) {
                        debugger;
                        if (response.d != null && response.d != "OK") {
                            var fuentes = [];
                            for (var i = 0; i < response.d.length; i++) {
                                var fuente = {
                                    IdCompPrecio: response.d[i].IdCompPrecio,
                                    P02FuenteDesc: response.d[i].P02FuenteDesc,
                                    NombreFuente1: { Nombre: response.d[i].P02FuenteDesc, IdParametro: response.d[i].P02Fuente },
                                    P02Fuente: response.d[i].P02Fuente,
                                    PrecioUnitario: response.d[i].PrecioUnitario
                                };
                                fuentes.push(fuente);
                            }
                            return fuentes;
                        } else {
                            if (response.d != null && response.d == "OK") {
                                $(e.detailCell.find("div")[0]).data("kendoGrid").dataSource.read();
                                alert("Se guardó correctamente.");
                            }
                            else {
                                alert("Ocurrio un Error al Guardar");
                            }
                        }

                    },
                    model: {
                        id: "IdCompPrecio",
                        fields: {
                            IdCompPrecio: { type: "number", defaultValue: 0, editable: false },
                            NombreFuente1: { defaultValue: { Nombre: "Cisco", IdParametro: 5} },
                            P02Fuente: { type: "number" },
                            P02FuenteDesc: { type: "string" },
                            PrecioUnitario: { type: "number" }
                        }
                    }
                }
            },
            toolbar: [
                { name: "create", text: "Nuevo" },
                { name: "save", text: "Grabar" },
                { name: "cancel", text: "Cancelar" }
              ],
            scrollable: false,
            sortable: false,
            filterable: false,
            editable: true,
            cancel: function (e) {
                e.preventDefault();
            },
            columns: [
            { field: "IdCompPrecio", title: "ID" },
            //{ field: "NombreFuente", title: "Fuente", width: "450px" },
            {field: "NombreFuente1", title: "Fuente", width: "180px", editor: fuenteDropDownEditor, template: "#=NombreFuente1.Nombre#" },
            { field: "PrecioUnitario", title: "Precio" }
            //            ,{ field: "AdUsuarioRegDesc", title: "Usuario Reg" },
            //            { field: "AdFechaReg", title: "Fecha Reg", format: "{0:dd/MM/yyyy}" },
            //            { field: "AdUsuarioModifDesc", title: "Usuario Mod" },
            //            { field: "AdFechaModif", title: "Fecha Mod", format: "{0:dd/MM/yyyy}" }
            ]
        });
    }

    function fuenteDropDownEditor(container, options) {
        debugger;
        $('<input required data-text-field="Nombre" data-value-field="IdParametro" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            type: "POST",
                            url: "Frm_Componentes.aspx/ListaFuentes" ,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        }
                    },
                    schema: { data: "d",
                        total: "d.length"
                    }
                }//,change: checkCelValue
                ,
                save: function () {
                    this.refresh();
                }
            });
    }
//    function checkCelValue() {
//        var selectedItem = this.dataSource.getByUid(this.select().data().uid);
//        $("#log").text("Selected Type.Name: " + selectedItem.Type.Name);
//    }

    function CargarLista(idCombo, funcion, texto) {
        $("#"+idCombo).kendoComboBox({
            placeholder: texto,
            dataTextField: "Nombre",
            dataValueField: "IdParametro",
            filter: "contains",
            minLength: 3,
            change: function(e) {
            var value = this.value();
            // Use the value of the widget
            },
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        type: "POST",
                        url: "Frm_Componentes.aspx/"+funcion,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    }
                },
                schema: {
                    data: "d",
                    total: "d.length"
                }
            }
        });
    }
</script>

</asp:Content>

